<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>flex</title>
    <link rel="stylesheet" href="./flex.css">
    
</head>



<div class="describe">
    <span>flex-direction:主轴方向</span>
    <button id="row">row</button>（默认值）：主轴为水平方向，起点在左端。
    <button id="row-reverse">row-reverse</button>主轴为水平方向，起点在右端。
    <button id="column">column</button>主轴为垂直方向，起点在上沿。
    <button id="column-reverse">column-reverse</button>主轴为垂直方向，起点在下沿。
</div>

<div class="describe">
    <span>flex-wrap:换行</span>
    <button id="nowrap">nowrap</button>（默认）：不换行
    <button id="wrap">wrap</button>换行，第一行在上方。
    <button id="wrap-reverse">wrap-reverse</button>换行，第一行在下方。
</div>

<div class="describe">
    <span>justify-content:主轴对齐方式</span>
    <button id="flex-start">flex-start</button>（默认值）：左对齐
    <button id="flex-end">flex-end</button>右对齐   
    <button id="center">center</button>居中
    <button id="space-between">space-between</button>两端对齐，项目之间的间隔都相等。
    <button id="space-around">space-around</button>每个项目两侧的间隔相等
</div>

<div class="describe">
    <span>align-items:竖轴（交叉轴）对齐方式</span>
    <button id="flex-start1">flex-start</button>交叉轴的起点对齐。
    <button id="flex-end1">flex-end</button>交叉轴的终点对齐。  
    <button id="center1">center</button>居中
    <button id="baseline">baseline</button>项目的第一行文字的基线对齐。
    <button id="stretch">stretch</button>（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
</div>

    <div class="box1">    
        <div class="box1item">1</div>
        <div class="box1item">2</div>
        <div class="box1item">3</div>

        <div class="box1item">4</div>
        <div class="box1item">5</div>
        <div class="box1item">6</div>
    </div>

    <div class="describe">
        <span>设置</span>
        <input type="text" id="item">
        <p style="display: inline;">的order为：</p>
        <input type="text" id="order">
        <button id="ok">确定设置</button>
        <br>
    </div>

    <div class="describe">   
        <span>设置</span>
        <input type="text" id="item2">
        <p style="display: inline;">的flex-grow为：</p>
        <input type="text" id="flex-grow">
        <button id="ok2">确定设置</button>
    </div>



    <p>
        参考链接：
        <a href="https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">Flex 布局教程</a>
    </p>
    <p>
        参考链接：
        <a href="https://www.cnblogs.com/echolun/p/11299460.html">一篇文章弄懂flex布局</a>
    </p>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./flex.js"></script>

</body>
</html>